<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
    <style>
    </style>
</head>

<body>
<div>
    <div class="layui-row" style="text-align: center;">
    </div>

</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    // 判断是否已经登录
    console.log(localStorage.getItem("userInfo"));
    $.ajax({
        url: "/api/spot?operation=query&page=1&limit=99999",
        type: "GET",
        dataType: "json",
        success: function (resp) {
            console.log(resp.data);
            // 循环数组，动态生成HTML代码
            for (var i = 0; i < resp.data.length; i++) {
                var spot = resp.data[i];
                var html = '<div class="layui-col-md4">' +
                    '<div class="layui-card">' +
                    '<div class="layui-card-header">' + spot.name + '</div>' +
                    '<div class="layui-card-body">' +
                    '<img height="200px" width="200px" src="' + spot.imageUrl + '" alt="" class="layui-upload-img" style="max-width: 100%;"><br><br>' +
                    '<a href="spotDetails.html?id=' + +spot.id + '" class="detailsBt layui-btn layui-btn-normal">详情</a>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
                $(".layui-row").append(html);
                localStorage.getItem("userInfo") ? $(".detailsBt").show() : $(".detailsBt").hide();
            }
        }
    })
</script>
</body>

</html>